<template>
	<view class="star-rating">
		<view v-for="(item, index) in stars" :key="index" class="star-item" @click="handleClick(index)">
			<uni-icons :type="index < currentValue ? 'star-filled' : 'star'"
				:color="index < currentValue ? '#ffca3e' : '#ccc'" size="20"></uni-icons>
		</view>
		<text v-if="showText" class="rating-text">{{ ratingText }}</text>
	</view>
</template>

<script>
	export default {
		name: 'star-rating',
		props: {
			value: {
				type: Number,
				default: 0
			},
			showText: {
				type: Boolean,
				default: true
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				currentValue: this.value,
				stars: [1, 2, 3, 4, 5]
			}
		},
		computed: {
			ratingText() {
				const texts = ['很差', '一般', '满意', '很满意', '非常满意']
				return texts[this.currentValue - 1] || ''
			}
		},
		watch: {
			value(newVal) {
				this.currentValue = newVal
			}
		},
		methods: {
			handleClick(index) {
				if (this.disabled) return
				this.currentValue = index + 1
				this.$emit('input', this.currentValue)
				this.$emit('change', this.currentValue)
			}
		}
	}
</script>

<style scoped>
	.star-rating {
		display: flex;
		align-items: center;
	}

	.star-item {
		margin-right: 8rpx;
	}

	.rating-text {
		margin-left: 20rpx;
		font-size: 28rpx;
		color: #666;
	}
</style>